<template>
  <div class="container">
    <span class="title">精彩文章</span>
    <div class="text">
      <div class="title2">为您推荐精彩文章</div>
      <span style="float:right;  cursor: pointer;">查看更多...</span>
    </div>
    <el-carousel height="500px" indicator-position="none" :autoplay=false :loop=false arrow="never" >
      <el-carousel-item v-for="(item, index) in wonderfulList" :key="index">
        <div class="f_box">
          <div class="box">
            <div class="s_box">
              <div class="ss_box"  @click="toDetails(item[0].imgUrl)">
                <img :src="item[0].imgUrl" alt="">
                <div class="bj">
                <div class="text_box">
                  <div class="name">{{ item[0].title }}</div>
                </div>
              </div>
              </div>
              <div class="ss_box"  @click="toDetails(item[1].imgUrl)">
                <img :src="item[1].imgUrl" alt="">
                <div class="bj">
                <div class="text_box">
                  <div class="name">{{ item[1].title }}</div>
                </div>
              </div>
              </div>
            </div>
            <div class="s_box2"  @click="toDetails(item[2].imgUrl)">
              <img :src="item[2].imgUrl" alt="">
              <div class="bj">
                <div class="text_box">
                  <div class="name">{{ item[2].title }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="box">
            <div class="s2_box"  @click="toDetails(item[3].imgUrl)">
              <img :src="item[3].imgUrl" alt="">
              <div class="bj">
                <div class="text_box">
                  <div class="name">{{ item[3].title }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import { findBanner } from '@/api/home.js'
import Message from '@/components/library/Message'
import { useRouter } from 'vue-router'
import { ref } from 'vue'
export default {
  name: 'HomeWonderful',
  setup () {
    const router = useRouter()
    const wonderfulList = ref([])
    function toLogin () {
      router.push({ path: '/login' })
    }
    function toDetails (imgurl) {
      router.push({ path: '/details', query: { url: imgurl } })
    }
    findBanner().then(res => {
      console.log(res.data)
      // token失效重新登录
      if (res.code === '999') {
        Message({ type: 'error', text: res.msg })
        toLogin()
      }
      if (res.code === '200')wonderfulList.value = res.data[4].wonderfulList || []
    }).catch(err => {
      console.log(err)
    })

    return { wonderfulList, toDetails }
  }

}
</script>

<style lang="less" scoped>
.container{
  margin-bottom: 10px;
  margin-top: 50px;
  .text{
    display: flex;
    justify-content: space-between;
  }
  .title{
    color: rgba(0,0,0,.65);
    font-weight: 600;
    font-size: 20px;
    font-family: PingFangSC-Semibold,PingFang SC;
  }
  .title2{
    height: 20px;
    color: rgba(0,0,0,.45);
    font-weight: 400;
    font-size: 14px;
    font-family: PingFangSC-Regular,PingFang SC;
  }
}
.f_box{
  height: 100%;
  width: 1240px;
  display: flex;
  flex-direction: row;
  justify-content:space-between;
  .box{
    height: 100%;
    width: 50%;
    // background-color: pink;
    // border: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .s_box{
      width: 100%;
      height: 59%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .ss_box{
        width: 100%;
        height: 100%;
        background-color: yellowgreen;
        margin-right: 5px;
        .bj{
          display: flex;
          align-items: flex-end;
          height: 100%;
          background: linear-gradient(180deg,transparent,rgba(0,0,0,.6));
          position: relative;
          top: -100%;
          .text_box{
            display: flex;
            flex-direction: column;
            width: 100%;
            padding-bottom: 10px;
            padding-left: 10px;
            .name{
              color: #fff;
              color: #fff;
              font-weight: 800;
              font-size: 18px;
              font-family: SourceHanSerifCN-Heavy,SourceHanSerifCN;
            }
          }
        }
        .hoverShadow();
        img{
          height: 100%;
          width: 100%;
          object-fit: cover;
        }
      }
    }
    .s_box2{
      width: 100%;
      height: 39%;
      background-color: paleturquoise;
      .bj{
          display: flex;
          align-items: flex-end;
          height: 100%;
          background: linear-gradient(180deg,transparent,rgba(0,0,0,.6));
          position: relative;
          top: -100%;
          .text_box{
            display: flex;
            flex-direction: column;
            width: 100%;
            padding-bottom: 10px;
            padding-left: 10px;
            .name{
              color: #fff;
              color: #fff;
              font-weight: 800;
              font-size: 18px;
              font-family: SourceHanSerifCN-Heavy,SourceHanSerifCN;
            }
          }
        }
      .hoverShadow();
      img{
        height: 100%;
        width: 100%;
        object-fit: cover;
      }
    }
    .s2_box{
      width: 100%;
      height: 100%;
      background-color: yellowgreen;
      margin-left: 5px;
      .bj{
          display: flex;
          align-items: flex-end;
          height: 100%;
          background: linear-gradient(180deg,transparent,rgba(0,0,0,.6));
          position: relative;
          top: -100%;
          .text_box{
            display: flex;
            flex-direction: column;
            width: 100%;
            padding-bottom: 10px;
            padding-left: 10px;
            .name{
              color: #fff;
              color: #fff;
              font-weight: 800;
              font-size: 18px;
              font-family: SourceHanSerifCN-Heavy,SourceHanSerifCN;
            }
          }
        }
      .hoverShadow();
      img{
        height: 100%;
        width: 100%;
        object-fit: cover;
      }
    }
  }
}

</style>
